<template>
  <el-dialog
    title="请假申请"
    :visible.sync="isShowDialog"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <div class="form-container">
      <el-form :model="jiaBan" ref="childForm" label-width="80px" :rules="rules">
        <el-form-item label="申请人" >
          <el-input readonly :value="username"></el-input>
<!--          <el-select v-model="jiaBan.jiaBanRenId">
            <el-option v-for="item in userList" :value="item.userId" :label="item.userNickname" :key="item.userId"></el-option>
          </el-select>-->
        </el-form-item>

        <el-form-item prop="startTime" label="开始时间">
          <el-date-picker
            style="width: 100%"
            v-model="jiaBan.startTime"
            type="datetime"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="endTime" label="结束时间">
          <el-date-picker
            style="width: 100%"
            v-model="jiaBan.endTime"
            type="datetime"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="jiaBanYuanYin" label="事由">
          <el-input type="textarea" :rows="5" v-model.trim="jiaBan.jiaBanYuanYin"></el-input>
        </el-form-item>
        <el-form-item prop="auditorIdList" label="审批人">
          <el-select v-model="jiaBan.auditorIdList" multiple >
            <el-option v-for="item in userList" :value="item.userId" :label="item.userNickname" :key="item.userId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">

      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="danger" @click="resetForm">重 置</el-button>
      <el-button
        type="success"
        @click="submitForm"
        :loading="changeLoading">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import jiaBanAPI from '@/api/workOvertime/workOvertime'
  import userAPI from '@/api/system/user'
  import {mapGetters} from 'vuex'
  export default {
    name: "workOvertimeSave",
    data() {
      const dateValid = (rule,value,callback)=>{
        if(this.jiaBan.startTime && this.jiaBan.endTime){
          if(this.jiaBan.endTime < this.jiaBan.startTime){
            callback(new Error('加班结束时间不能早于开始时间'))
          }else{
            callback()
          }
        }else{
          callback()
        }
      }
      return {
        jiaBan: {
          auditorIdList: [],
          endTime: new Date(),
          jiaBanRenId: this.userId,
          jiaBanYuanYin: "",
          startTime: new Date(),
          jiaBanId:'',
          jiaBanRenName:'',
          stateName:''
        },
        rules: {
          jiaBanRenId: [
            {required: true, message: '请选择申请人', trigger: 'blur'}
          ],
          jiaBanYuanYin: [
            {required: true, message: '请输入加班事由', trigger: 'blur'},
          ],
          startTime: [
            {required: true, message: '请选择加班开始时间', trigger: 'change'},
            {validator:dateValid,trigger: 'change'}
          ],
          endTime: [
            {required: true, message: '请选择加班结束时间', trigger: 'change'},
            {validator:dateValid,trigger: 'change'}
          ],
          auditorIdList: [
            {required: true, message: '请选择审批人', trigger: 'change'},
          ],

        },
        isShowDialog : false,
        userList:[],
        departmentList:[],
        changeLoading:false
      }
    },
    computed:{
      ...mapGetters([
        'userId',
        'username'
      ])
    },
    created() {
      this.getUserList()
    },
    methods: {
      close(){
        this.resetForm()
        this.isShowDialog = false
      },
      getUserList(){
        userAPI.getList('','',1,100).then(res=>{
          this.userList = res.records
        })
      },
      saveOrUpdate() {
        this.changeLoading = true
        const promise = this.jiaBan.jiaBanId ? jiaBanAPI.edit(this.jiaBan) : jiaBanAPI.save(this.jiaBan)
        promise.then(res => {
          this.changeLoading = false
          this.$message.success('保存成功')
          this.isShowDialog = false
          this.resetForm()
          this.$emit('update')
        })

      },
      beforeClose(done){
        this.resetForm()
        done(true)
      },

      open(id) {
        this.isShowDialog = true
        this.jiaBan.startTime = this.jiaBan.endTime = new Date()
        if(id){
         jiaBanAPI.getById(id).then(res=>{
           this.jiaBan = res.result
         })
        }
      },
      resetForm(){
        this.$refs['childForm'].resetFields()
        if(this.jiaBan.startTime || this.jiaBan.endTime){
          this.jiaBan.startTime = ''
          this.jiaBan.endTime = ''
        }
      },
      submitForm(){
        this.$refs['childForm'].validate(valid => {
          if (valid && !this.changeLoading) {
            this.saveOrUpdate()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
